<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>企业AI匹配-雷达图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;display=swap"
      rel="stylesheet"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        color: #333;
        line-height: 1.6;
        padding: 20px;
        min-height: 100vh;
      }

      .container {
        max-width: 1200px;
        margin: 0 auto;
      }

      header {
        text-align: center;
        margin-bottom: 40px;
        padding: 20px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      }

      h1 {
        font-size: 2.5rem;
        margin-bottom: 10px;
        color: #2c3e50;
      }

      .subtitle {
        font-size: 1.2rem;
        color: #7f8c8d;
        margin-bottom: 20px;
      }

      .dashboard {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        margin-bottom: 40px;
      }

      .card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        padding: 25px;
        transition: transform 0.3s, box-shadow 0.3s;
      }

      .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
      }

      .card h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
        color: #2c3e50;
        border-bottom: 2px solid #3498db;
        padding-bottom: 10px;
      }

      .chart-container {
        width: 100%;
        height: 400px;
      }

      .controls {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-bottom: 30px;
      }

      .control-btn {
        padding: 10px 20px;
        background: #3498db;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.3s;
      }

      .control-btn:hover {
        background: #2980b9;
        transform: translateY(-2px);
      }

      .control-btn.active {
        background: #2c3e50;
      }

      .skills-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
        margin-top: 20px;
      }

      .skill-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        background: #f8f9fa;
        border-radius: 8px;
        border-left: 4px solid #3498db;
      }

      .skill-name {
        font-weight: 500;
      }

      .skill-value {
        font-weight: 600;
        color: #2c3e50;
      }

      .comparison-section {
        margin-top: 40px;
      }

      .comparison-chart {
        height: 500px;
      }

      footer {
        text-align: center;
        margin-top: 40px;
        padding: 20px;
        color: #7f8c8d;
        font-size: 0.9rem;
      }

      @media (max-width: 768px) {
        .dashboard {
          grid-template-columns: 1fr;
        }

        h1 {
          font-size: 2rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>技能雷达图可视化分析</h1>
        <p class="subtitle">前端开发工程师技能评估与对比分析</p>
      </header>

      <div class="controls">
        <button class="control-btn active" data-skill="frontend">
          前端技能
        </button>
        <button class="control-btn" data-skill="backend">后端技能</button>
        <button class="control-btn" data-skill="soft">软技能</button>
        <button class="control-btn" data-skill="all">综合视图</button>
      </div>

      <div class="dashboard">
        <div class="card">
          <h2>个人技能雷达图</h2>
          <div id="radar-chart" class="chart-container"></div>
        </div>

        <div class="card">
          <h2>技能详情分析</h2>
          <div id="skill-details">
            <p>选择左侧雷达图的不同区域或使用上方按钮查看详细技能分析。</p>
            <div class="skills-list">
              <!-- 技能项将通过JavaScript动态生成 -->
            </div>
          </div>
        </div>
      </div>

      <div class="card comparison-section">
        <h2>技能对比分析</h2>
        <div id="comparison-chart" class="comparison-chart"></div>
      </div>

      <footer>
        <p>© 2023 技能评估系统 | 数据仅供参考</p>
      </footer>
    </div>

    <script>
      // 初始化ECharts实例
      const radarChart = echarts.init(document.getElementById("radar-chart"));
      const comparisonChart = echarts.init(
        document.getElementById("comparison-chart")
      );

      // 技能数据
      const skillData = {
        frontend: {
          indicators: [
            { name: "HTML/CSS", max: 100 },
            { name: "JavaScript", max: 100 },
            { name: "React", max: 100 },
            { name: "Vue.js", max: 100 },
            { name: "TypeScript", max: 100 },
            { name: "响应式设计", max: 100 },
            { name: "前端性能", max: 100 },
            { name: "构建工具", max: 100 },
          ],
          personal: [85, 90, 80, 70, 75, 88, 82, 78],
          average: [75, 80, 70, 65, 60, 72, 68, 65],
          target: [90, 95, 85, 80, 85, 90, 88, 82],
        },
        backend: {
          indicators: [
            { name: "Node.js", max: 100 },
            { name: "数据库", max: 100 },
            { name: "API设计", max: 100 },
            { name: "服务器管理", max: 100 },
            { name: "安全性", max: 100 },
            { name: "性能优化", max: 100 },
            { name: "系统架构", max: 100 },
          ],
          personal: [70, 65, 75, 60, 68, 72, 65],
          average: [65, 60, 70, 55, 62, 68, 60],
          target: [85, 80, 85, 75, 82, 85, 80],
        },
        soft: {
          indicators: [
            { name: "沟通能力", max: 100 },
            { name: "团队协作", max: 100 },
            { name: "问题解决", max: 100 },
            { name: "时间管理", max: 100 },
            { name: "学习能力", max: 100 },
            { name: "领导力", max: 100 },
          ],
          personal: [80, 85, 88, 82, 90, 75],
          average: [75, 78, 80, 75, 82, 70],
          target: [90, 90, 92, 88, 95, 85],
        },
        all: {
          indicators: [
            { name: "技术深度", max: 100 },
            { name: "技术广度", max: 100 },
            { name: "项目经验", max: 100 },
            { name: "学习能力", max: 100 },
            { name: "解决问题", max: 100 },
            { name: "团队协作", max: 100 },
            { name: "沟通表达", max: 100 },
          ],
          personal: [82, 78, 85, 90, 88, 85, 80],
          average: [75, 70, 72, 82, 80, 78, 75],
          target: [90, 85, 90, 95, 92, 90, 88],
        },
      };

      // 当前选中的技能类型
      let currentSkillType = "frontend";

      // 更新雷达图
      function updateRadarChart() {
        const data = skillData[currentSkillType];

        const option = {
          tooltip: {
            trigger: "item",
          },
          radar: {
            shape: "circle",
            indicator: data.indicators,
            radius: "65%",
            name: {
              textStyle: {
                color: "#2c3e50",
                fontSize: 12,
                fontWeight: "500",
              },
            },
            splitLine: {
              lineStyle: {
                color: ["#e0e0e0", "#bdc3c7", "#95a5a6"],
              },
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: [
                  "rgba(255, 255, 255, 0.8)",
                  "rgba(240, 240, 240, 0.8)",
                  "rgba(220, 220, 220, 0.8)",
                ],
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(0, 0, 0, 0.1)",
              },
            },
          },
          series: [
            {
              name: "技能评估",
              type: "radar",
              data: [
                {
                  value: data.personal,
                  name: "个人能力",
                  areaStyle: {
                    color: "rgba(52, 152, 219, 0.6)",
                  },
                  lineStyle: {
                    width: 2,
                    color: "#3498db",
                  },
                  itemStyle: {
                    color: "#3498db",
                  },
                },
                {
                  value: data.average,
                  name: "行业平均",
                  areaStyle: {
                    color: "rgba(46, 204, 113, 0.4)",
                  },
                  lineStyle: {
                    width: 2,
                    color: "#2ecc71",
                  },
                  itemStyle: {
                    color: "#2ecc71",
                  },
                },
                {
                  value: data.target,
                  name: "目标水平",
                  areaStyle: {
                    color: "rgba(231, 76, 60, 0.3)",
                  },
                  lineStyle: {
                    width: 2,
                    color: "#e74c3c",
                  },
                  itemStyle: {
                    color: "#e74c3c",
                  },
                },
              ],
            },
          ],
          legend: {
            data: ["个人能力", "行业平均", "目标水平"],
            bottom: 10,
            textStyle: {
              color: "#2c3e50",
            },
          },
          color: ["#3498db", "#2ecc71", "#e74c3c"],
        };

        radarChart.setOption(option);
      }

      // 更新对比图表
      function updateComparisonChart() {
        const data = skillData[currentSkillType];

        const option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            data: ["个人能力", "行业平均", "目标水平"],
            bottom: 10,
            textStyle: {
              color: "#2c3e50",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "15%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
            axisLine: {
              lineStyle: {
                color: "#7f8c8d",
              },
            },
          },
          yAxis: {
            type: "category",
            data: data.indicators.map((indicator) => indicator.name),
            axisLine: {
              lineStyle: {
                color: "#7f8c8d",
              },
            },
          },
          series: [
            {
              name: "个人能力",
              type: "bar",
              data: data.personal,
              itemStyle: {
                color: "#3498db",
              },
            },
            {
              name: "行业平均",
              type: "bar",
              data: data.average,
              itemStyle: {
                color: "#2ecc71",
              },
            },
            {
              name: "目标水平",
              type: "bar",
              data: data.target,
              itemStyle: {
                color: "#e74c3c",
              },
            },
          ],
          color: ["#3498db", "#2ecc71", "#e74c3c"],
        };

        comparisonChart.setOption(option);
      }

      // 更新技能详情列表
      function updateSkillDetails() {
        const data = skillData[currentSkillType];
        const skillsList = document.querySelector(".skills-list");

        skillsList.innerHTML = "";

        data.indicators.forEach((indicator, index) => {
          const skillItem = document.createElement("div");
          skillItem.className = "skill-item";

          const personalValue = data.personal[index];
          const averageValue = data.average[index];
          const targetValue = data.target[index];

          // 计算与平均值的差距
          const gap = personalValue - averageValue;
          const gapText = gap >= 0 ? `+${gap}` : `${gap}`;
          const gapClass = gap >= 0 ? "positive" : "negative";

          skillItem.innerHTML = `
                    <span class="skill-name">${indicator.name}</span>
                    <div>
                        <span class="skill-value">${personalValue}</span>
                        <span style="margin-left: 10px; font-size: 0.9rem; color: ${
                          gap >= 0 ? "#2ecc71" : "#e74c3c"
                        }">${gapText}</span>
                    </div>
                `;

          skillsList.appendChild(skillItem);
        });
      }

      // 初始化图表
      function initCharts() {
        updateRadarChart();
        updateComparisonChart();
        updateSkillDetails();

        // 添加窗口大小变化监听
        window.addEventListener("resize", function () {
          radarChart.resize();
          comparisonChart.resize();
        });
      }

      // 按钮点击事件
      document.querySelectorAll(".control-btn").forEach((button) => {
        button.addEventListener("click", function () {
          // 更新活动按钮
          document.querySelectorAll(".control-btn").forEach((btn) => {
            btn.classList.remove("active");
          });
          this.classList.add("active");

          // 更新当前技能类型
          currentSkillType = this.getAttribute("data-skill");

          // 更新所有图表
          updateRadarChart();
          updateComparisonChart();
          updateSkillDetails();
        });
      });

      // 页面加载完成后初始化
      document.addEventListener("DOMContentLoaded", initCharts);
    </script>
  </body>
</html>
